import { HolderOutlined, PlusOutlined, StopOutlined } from '@ant-design/icons'
import { DndContext } from '@dnd-kit/core'
import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { Button, Table } from 'antd'
import React, { useContext, useMemo } from 'react'
import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
  'data-row-key': string
}
interface RowContextProps {
  setActivatorNodeRef?: (element: HTMLElement | null) => void
  listeners?: SyntheticListenerMap
}
const RowContext = React.createContext<RowContextProps>({})
const DragHandle = () => {
  const { setActivatorNodeRef, listeners } = useContext(RowContext)
  return (
    <Button
      type="text"
      size="small"
      icon={<HolderOutlined />}
      style={{
        cursor: 'move',
      }}
      ref={setActivatorNodeRef}
      {...listeners}
    />
  )
}
const Row: React.FC<RowProps> = (props) => {
  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
    id: props['data-row-key'],
  })
  const style: React.CSSProperties = {
    ...props.style,
    transform: CSS.Translate.toString(transform),
    transition,
    ...(isDragging ? { position: 'relative', zIndex: 99 } : {}),
  }
  const contextValue = useMemo<RowContextProps>(
    () => ({ setActivatorNodeRef, listeners }),
    [setActivatorNodeRef, listeners],
  )
  return (
    <RowContext.Provider value={contextValue}>
      <tr {...props} ref={setNodeRef} style={style} {...attributes} />
    </RowContext.Provider>
  )
}

interface SortableTableProps {
  locale?: any
  summary?: any
  rowKey: string
  dataSource: any[]
  columns: any[]
  onDragEnd: (...set: any) => void
  showMove: boolean
}
const SortableTable: React.FC<SortableTableProps> = (props) => {
  return (
    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={props.onDragEnd}>
      <SortableContext items={props.dataSource.map((i) => i[props.rowKey])} strategy={verticalListSortingStrategy}>
        <Table
          style={{ width: '100%' }}
          components={{
            body: {
              row: Row,
            },
          }}
          bordered
          className="small_sise_customtable self_customtable_quotation_edit"
          columns={[
            {
              key: 'sort',
              align: 'center',
              width: 80,
              title: '排序',
              render: () =>
                props.dataSource?.every((item) => !item.isEdit) && props?.showMove ? (
                  <DragHandle />
                ) : (
                  <div style={{ visibility: 'hidden' }}>
                    <DragHandle />
                  </div>
                ),
            },
            ...props.columns,
          ]}
          pagination={false}
          dataSource={props?.dataSource || []}
          rowKey={props.rowKey}
          summary={props?.summary}
          locale={props?.locale}
        />
      </SortableContext>
    </DndContext>
  )
}

export default SortableTable
